<template>
  <div>
    <p class="title">课程目录</p>
    <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span class="listTitle" @click="leftListClick(data)" :title="node.label">{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" icon="el-icon-circle-plus" @click="addClick(data.id)"></el-button>
          <el-button type="text" size="mini" icon="el-icon-edit" @click="editClick(data)"></el-button>
          <el-button type="text" size="mini" icon="el-icon-error" @click="delClick(data.id)"></el-button>
        </span>
      </span>

    </el-tree>
    <!-- 新增编辑 -->
    <el-dialog title="课程目录" :visible.sync="classFlg" width="30%">
      <el-form ref="rulesForm" :rules="rules" :model="classForm" label-width="110px">
        <el-form-item label="课程目录名称" prop="name">
          <el-input v-model="classForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="classFlg = false">取 消</el-button>
        <el-button type="primary" @click="classFormClick" :loading="classLoad">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { RolePermissionsQX } from '../../../../api/index';

export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: '张三为什么打李四',
          children: [{
            id: 2,
            label: '贷贷款给不给批贷贷款给不给批贷贷款给不给批贷贷款给不给批'
          }]
        },
        {
          id: 12,
          label: '如何上班摸鱼',
          children: [{
            id: 22,
            label: '魔域大法好'
          }]
        }
      ],

      classFlg: false,
      classForm: {
        editId: '',
        name: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入课程目录名称', trigger: 'blur' },
        ]
      },
      classLoad: false,

    }
  },
  created() {

  },
  methods: {
    //点击查看rightList详情
    leftListClick(data) {
      this.$emit('leftClickInitRightList', data)
    },
    //提交
    classFormClick() {
      this.$refs.rulesForm.validate((valid) => {
        if (valid) {
          this.classLoad = true;
          setTimeout(() => {
            this.classLoad = false;
            this.classFlg = false;
            if (this.classForm.editId) {
              this.$message.success('编辑成功');
            } else {
              this.$message.success('新增成功');
            }
          }, 1500)
        }
      })
    },
    //新增
    addClick() {
      this.classForm.name = '';
      this.classForm.editId = '';
      this.classFlg = true;
    },
    //编辑
    editClick(data) {
      this.classForm.name = data.label;
      this.classForm.editId = data.id;
      this.classFlg = true;
    },
    //删除
    delClick() {
      this.$confirm('确定要删除该目录吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功');
      })
    },
  }
}

</script>
<style scoped>
.title {
    margin-bottom: 10px;
}
.listTitle {
    display: inline-block;
    width: 15rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>